<template>
  <!-- <div style="padding: 24px 12px; height: calc(100vh - 170px)"> -->
  <!-- <div style="padding: 0 12px 24px 12px"> -->
  <div style="padding:6px 12px 18px 12px;">
    <el-tabs
      type=""
      tab-position="top"
      v-model="activeTabName"
      @tab-click="handleTabClick"
    >
      <el-tab-pane label="进离港流量" name="GeneralChart">
        <GeneralChart />
      </el-tab-pane>
      <el-tab-pane label="扇区/进出点" name="AdvancedChart">
        <AdvancedChart />
      </el-tab-pane>
      <el-tab-pane label="终端量表" name="GeneralTable">终端量表</el-tab-pane>
      <el-tab-pane label="中心量表" name="ClassicPolicyScales">
        <ClassicPolicyScales />
      </el-tab-pane>
      <el-tab-pane label="原始数据" name="RawDataView"
        ><RawDataView
      /></el-tab-pane>
      <el-tab-pane label="DEBUG" name="DevHandler">
        <DevHandler />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref } from "vue";
import DevHandler from "./DevHandler";
import RawDataView from "./RawDataView";
import ClassicPolicyScales from "./ClassicPolicyScales";
import GeneralChart from "./GeneralChart";
import AdvancedChart from "./AdvancedChart";

const activeTabName = ref("GeneralChart");

const handleTabClick = (tab, event) => {
  // console.log(tab, event);
};
</script>
